<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
    <script src="https://unpkg.com/preact@10.25.4/dist/preact.umd.js"></script>
    <script src="https://unpkg.com/preact@10.25.4/hooks/dist/hooks.umd.js"></script>
    <script src="https://unpkg.com/preact@10.25.4/compat/dist/compat.umd.js"></script>
    <script>
      // Expose Preact's compat as React for WebChat
      window.React = preactCompat;
      window.ReactDOM = preactCompat;
    </script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="text/babel" data-presets="env,stage-3,react">
      const {
        React: { useMemo },
        WebChat: {
          hooks: { useDirection },
          testIds
        }
      } = window;

      run(async function () {
        WebChat.renderWebChat(
          {
            directLine: await testHelpers.createDirectLineWithTranscript([
              {
                from:{
                  role: "bot"
                },
                id: "a-00000",
                timestamp: 0,
                type: "message",
                text: "This is compleded feedback action example.",
                entities: [
                  {
                    '@context': 'https://schema.org',
                    '@id': '',
                    '@type': 'Message',
                    type: 'https://schema.org/Message',
                    keywords: ['AIGeneratedContent', 'AllowCopy'],
                    potentialAction: [
                      {
                        "@type": "LikeAction",
                        actionStatus: "CompletedActionStatus",
                        target: {
                          "@type": "EntryPoint",
                          urlTemplate: "ms-directline://postback?interaction=like"
                        }
                      },
                      {
                        "@type": "DislikeAction",
                        actionStatus: "PotentialActionStatus",
                        result: {
                          "@type": "Review",
                          reviewBody: "I don't like it.",
                          "reviewBody-input": {
                            "@type": "PropertyValueSpecification",
                            valueMinLength: 3,
                            valueName: "reason"
                          }
                        },
                        target: {
                          "@type": "EntryPoint",
                          urlTemplate: "ms-directline://postback?interaction=dislike{&reason}"
                        }
                      }
                    ]
                  }
                ]
              },
              {
                from: {
                  role: 'user'
                },
                id: "a-00001",
                timestamp: 0,
                type: "message",
                text: "Test",
              },
              {
                from:{
                  role: "bot"
                },
                id: "a-00002",
                timestamp: 0,
                type: "message",
                text: "Hi! I'm *Cody*, the devbot. How can I help?",
                entities: [
                  {
                    '@context': 'https://schema.org',
                    '@id': '',
                    '@type': 'Message',
                    type: 'https://schema.org/Message',
                    keywords: [],
                    potentialAction: [
                      {
                        "@type": "LikeAction",
                        actionStatus: "PotentialActionStatus",
                        target: {
                          "@type": "EntryPoint",
                          urlTemplate: "ms-directline://postback?interaction=like"
                        }
                      },
                      {
                        "@type": "DislikeAction",
                        actionStatus: "PotentialActionStatus",
                        result: {
                          "@type": "Review",
                          reviewBody: "I don't like it.",
                          "reviewBody-input": {
                            "@type": "PropertyValueSpecification",
                            valueMinLength: 3,
                            valueName: "reason"
                          }
                        },
                        target: {
                          "@type": "EntryPoint",
                          urlTemplate: "ms-directline://postback?interaction=dislike{&reason}"
                        }
                      }
                    ]
                  }
                ]
              }
            ]),
            store: testHelpers.createStore(),
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();
        await pageConditions.numActivitiesShown(3);

        await host.snapshot('local');

        const [,, activityStatus] = pageElements.activityStatuses();
        const buttons = activityStatus.querySelectorAll(`[data-testid="${testIds.feedbackButton}"]`);

        pageElements.sendBoxTextBox().focus();

        await host.sendShiftTab(3);
        await host.sendKeys('ENTER');
        await expect(document.activeElement).toBe(buttons[0]);

        // Wait for 400 ms for the tooltip to show up.
        await new Promise(resolve => setTimeout(resolve, 400));

        await host.snapshot('local');

        await host.sendTab();
        await expect(document.activeElement).toBe(buttons[1]);

        // Wait for 400 ms for the tooltip to show up.
        await new Promise(resolve => setTimeout(resolve, 400));

        await host.snapshot('local');

        await host.sendTab();
        await expect(document.activeElement).toBe(buttons[0]);

        // Wait for 400 ms for the tooltip to show up.
        await new Promise(resolve => setTimeout(resolve, 400));

        await host.snapshot('local');

        await host.sendKeys('SPACE');
        await host.snapshot('local');
      });
    </script>
  </body>
</html>
